<template>
  <div class="dropdown">
    <span class="date"
      >今天是你在三峡学院的第<span id="num">{{ days }}</span
      >天</span
    >
    <el-dropdown @command="dropBt">
      <span class="el-dropdown-link">
        欢迎您，{{ info }}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="a">个人中心</el-dropdown-item>
        <el-dropdown-item command="b">修改密码</el-dropdown-item>
        <el-dropdown-item command="c" divided>退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import { removeToken } from "@/utils/auth";
import { get } from "@/utils/http.js";
export default {
  data() {
    return {
      time: "",
      info: sessionStorage.getItem("nickname"),
    };
  },
  methods: {
    dropBt(n) {
      // 退出登录
      if (n == "c") {
        // 删除token
        removeToken();
        // 删除昵称
        sessionStorage.removeItem("nickname");
        // 跳回登录页
        this.$router.push("/login");
      }
      // 修改密码
      if(n=="b"){
        this.$router.push("/count");
      }
      // 个人中心
      if(n=="a"){
        this.$router.push("/user_info");
      }
    },
  },
  computed: {
    days() {
      let target = new Date(this.time);
      let now = new Date();
      return Math.floor((now - target) / 1000 / 60 / 60 / 24);
    },
  },
  mounted() {
    get("/in").then((res) => {
      this.time = res.time;
    });
  },
};
</script>

<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.date {
  margin-right: 50px;
}
#num {
  font-size: 24px;
  color: rgba(0, 0, 255, 0.679);
}
</style>